{% extends 'common/base.html' %}
{% block css %}
    <style>
        .card {
            margin: 20px;
            width: 200px;
            height: 100px;
            line-height: 85px;
            font-size: 20px;
            border: 2px solid #0e9aef;
            color: black;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 20px;
            float: left;
        }

        .card:hover {
            text-align: center;
            line-height: 85px;
            background: #0e9aef;
            color: white;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 20px;
        }

        .tooltip-inner {
            font-size: 16px;
            background-color: #0e8ee7;
        }

        .tooltip {
            border-radius: 20px;
        }

        .tooltip .tooltip-arrow {
            border-top-color: #0e8ee7;

        }

        #imgSpan, #imgSpan2 {
            border: 1px solid #0e9aef;
            border-radius: 20px;
            width: 270px;
            height: 350px;

        }

        #file, #excel {
            opacity: 0;
            width: 270px;
            height: 320px;
        }

        #preimg, #preimg2 {
            width: 200px;
            position: absolute;
            top: 15%;
            left: 15%;
        }

    </style>
{% endblock %}
{% block content %}
    <section class="content-header">
        <div>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 试卷管理</a></li>
                <li class="active">添加试卷</li>
            </ol>
        </div>
    </section>
    <section class="content" id="showcontent" style="width: 100%;height: 100%;">
        <div class="row">
            <div class="col-md-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">添加试卷</h3>
                    </div>
                    <div style="vertical-align: middle;text-align: center;">
                        <a class="card btn" type="button" data-toggle="tooltip" data-placement="bottom" title="通过选择题目组成试卷"
                           href="{{ url_for("main.test_add_html")}}?type=1">手动选择</a>
                        <a class="card btn" type="button" data-toggle="tooltip" data-placement="bottom"
                           title="设定题目量后随即生成试卷，再进行编辑" onclick="openModal()">随机组卷 </a>
                    </div>
                    <div class="modal bs-example-modal-sm" id="input_count" tabindex="-1" role="dialog"
                         data-backdrop="false" aria-hidden="true">
                        <div class="modal-dialog modal-sm" role="document">
                            <div class="modal-content">
                                <form method="POST" action="{{ url_for('main.test_add2') }}" onsubmit="return checkCount()">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span></button>
                                        <h4 class="float-left">随机组题</h4>
                                    </div>
                                    <div class="modal-body text-center">
                                        <div class="input-group input-group-sm">
                                            <div>
                                                <input type="text" name='count' id='count' placeholder="请输入题目数"/>
                                                <p style="color:gray">tip:目前题库可选的题目有{{ total }}道题，最多可选择{{ total }}题</p>
                                            </div>
                                        </div>
                                        <div style="text-align: center;margin:10px 0 0 0;">
                                            <button class="btn btn-primary" type="submit">确定</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}
{% block js %}
    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip();
        });

        function openModal() {
            $("#input_count").modal();
        }

        //重置模态框
        $('#input_count').on('hidden.bs.modal', function (e) {
            $("#count").val("")
        })

        function checkCount() {
            var count = $("#count").val();
            var total = {{ total }}
            if(count > total || count <=0){
                layer.open({
                    title: '警告',
                    content: '请输入合适的题目数！',
                    icon: 5,
                    time:2000
                })
                return false;
            }
        }
    </script>
{% endblock %}
